<template>
  <div :style="{ height, width }" class="box" :id="id" />
</template>

<script setup>
import { onMounted, shallowRef, watch } from "vue";
import * as echarts from "echarts";

const props = defineProps({
  id: {
    require: true,
    default: "vmCpuChartId",
  },
  height: {
    require: true,
    default: "100%",
  },
  width: {
    require: true,
    default: "100%",
  },
  chartOption: {
    require: true,
    default: {},
  }
});
const chartDom = shallowRef(null);
onMounted(() => {
  // init()
  setTimeout(() => {
    init()
  }, 0);
  window.addEventListener(
    "resize",
    () => {
      chartDom.value.resize()
    });
})

// watch(() => props.items,
//   (val) => {
//     console.log('val,------',val);
//     init()
//   },
//   {deep: true}
// )
watch(() => props.chartOption,
  (val) => {
    init()
  },
  {deep: true}
)

// 处理方法
const init = () => {
  chartDom.value = echarts.init(document.getElementById(props.id));
  chartDom.value.setOption(props.chartOption, true);
  chartDom.value.resize()
};
defineExpose({ init });
</script>

<style scoped>
.box {
  width: 100%;
  background: #fff;
  border-radius: 4px;
}
</style>
